<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Graph</title>
  <script src="https://d3js.org/d3.v7.min.js"></script>
  <style>
    body {
      font-family: sans-serif;
    }
    svg {
      width: 600px;
      height: 400px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>Random Graph Example</h1>
  <svg id="graph"></svg>

  <script>
    // Create random graph data
    const nodes = [
      { id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }
    ];
    const links = [
      { source: 1, target: 2 },
      { source: 1, target: 3 },
      { source: 2, target: 4 },
      { source: 3, target: 5 },
      { source: 4, target: 5 }
    ];

    // Create an SVG element
    const width = 600;
    const height = 400;
    const svg = d3.select("#graph")
                  .attr("width", width)
                  .attr("height", height);

    // Create force simulation
    const simulation = d3.forceSimulation(nodes)
                         .force("link", d3.forceLink(links).id(d => d.id))
                         .force("charge", d3.forceManyBody())
                         .force("center", d3.forceCenter(width / 2, height / 2))
                         .on("tick", ticked);

    // Create links (edges)
    const link = svg.selectAll(".link")
                    .data(links)
                    .enter().append("line")
                    .attr("class", "link")
                    .attr("stroke", "#ccc");

    // Create nodes (vertices)
    const node = svg.selectAll(".node")
                    .data(nodes)
                    .enter().append("circle")
                    .attr("class", "node")
                    .attr("r", 10)
                    .attr("fill", "steelblue")
                    .call(d3.drag()
                            .on("start", dragstart)
                            .on("drag", dragged)
                            .on("end", dragend));

    // Function to update node and link positions on each tick of the simulation
    function ticked() {
      link.attr("x1", d => d.source.x)
          .attr("y1", d => d.source.y)
          .attr("x
